import { transform } from '@svgr/core'

const transformCode = async (svgCode, name, componentName, type, family, defaultStrokeWidth) => {
    const svgProps = {
        width: '1em',
        height: '1em',
        class: `cui-icon-${name} cui-icon-${type} cui-icon-${family}`,
    }

    if (defaultStrokeWidth) {
        svgProps['stroke-width'] = defaultStrokeWidth;
    }

    // if (family === 'icon' || (family === 'sax' && type !== 'two') || family === 'f7') {
    //     svgProps['fill'] = 'currentColor';
    //     svgProps['stroke'] = 'none';
    // }

    const jsCode = await transform(
    svgCode,
    {
        plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx', '@svgr/plugin-prettier'],
        configFile: '',
        typescript: true,
        svgProps,
        replaceAttrValues: {
            '#000': 'currentColor',
			'#000000': 'currentColor',
			'black': 'currentColor',
			'#292D32': 'currentColor',
			'uim-primary': 'cui-tt-primary',
			'uim-secondary': 'cui-tt-secondary',
			'uim-tertiary': 'cui-tt-tertiary',
			'uim-quaternary': 'cui-tt-quaternary',
        },
        svgoConfig: {
            plugins: [
                'convertStyleToAttrs',
                {
                    name: 'removeAttrs',
                    params: {
                        attrs: type === 'twotone' ? '(className|id|xmlSpace|t)' : '(className|class|id|xmlSpace|t)',
                    }
                }
            ],
        },
        template: ({interfaces, componentName, jsx },{ tpl }) => {
            return tpl`

            export function ${componentName}(props: IconProps) {
                const FN = (props: SVGAttributes) => ${jsx};
                return convertIcon(FN, '${name+''}', '${type+''}', props);
            }

            `
        },
        prettierConfig: {
            tabWidth: 4
        },
        ext: '.tsx',
        icon: true
    },
    { componentName: componentName, name: name },
    )
    return jsCode;
}

export default transformCode;
